<script lang="ts" setup>
import { ref } from 'vue'
import { changePasswordApi } from '@/api/emp'
import { useLoginEmpStore } from '@/stores/loginEmp'
import {useRouter} from 'vue-router'
import { ElMessage } from 'element-plus'

const loginStore = useLoginEmpStore();
const router = useRouter();

//声明表单数据
let changePassForm = ref<any>({password:'', repassword:'', newpassword:''})

//修改密码
const changePassword = async () => {
  if(changePassForm.value.password != changePassForm.value.repassword){
    ElMessage.error('两次输入密码不一致');
    return;
  }
  
  let result = await changePasswordApi(changePassForm.value)
  if(result.code){
    loginStore.clearLoginEmp();
    router.push('/login')
  }else {
    ElMessage.error(result.msg)
  }
}

//清空表单
const clear = () => {
  changePassForm.value = {password:'', repassword:'', newpassword:''}
}
</script>

<template>
    <!-- 顶部标题 -->
    <div>
      <div id="title">修改密码</div>
      <br><br>
    </div>
    

    <!-- 条件搜索表单 -->
    <div class="center">
      <el-form :model="changePassForm" class="demo-form-inline" label-width="120px" width="30%">
        <el-form-item label="原始密码">
          <el-input type="password" v-model="changePassForm.password" placeholder="请输入原始密码"/>
        </el-form-item>

        <el-form-item label="确认原始密码">
          <el-input type="password" v-model="changePassForm.repassword" placeholder="请再次输入原始密码"/>
        </el-form-item>

        <el-form-item label="新密码">
          <el-input type="password" v-model="changePassForm.newpassword" placeholder="请输入新密码"/>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="changePassword()">确定</el-button>
          <el-button type="info" @click="clear()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>


<style scoped>
#title {
  font-size: 20px;
  font-weight: 600;
}

.center {
  width: 30%;
}
</style>